<template>
  <!-- 基础题库页面 -->
  <div style="padding: 50px 20px 40px 10px">
    <el-row>
      <div class="grid-content bg-purple-dark">
        <el-card class="box-card" shadow="never">
          <!-- 表单组件 -->
          <theContent @searchBtn="searchBtn" />
          <el-alert type="info" :closable="false" class="incoTitle">
            <i class="el-icon-info" style="font-size: 16px"></i>
            数据一共{{ tableData.length }}条
          </el-alert>
          <!-- 表格 -->
          <div class="formEle">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{ backgroundColor: '#fafafa' }"
            >
              <el-table-column prop="number" label="试题编号" width="150" />
              <el-table-column prop="subject" label="学科" width="150" />
              <el-table-column prop="catalog" label="目录" width="150" />
              <el-table-column prop="difficulty" label="题型" width="150" />
              <el-table-column label="题干" width="280">
                <template #default="{ row }">
                  <span v-html="row.question"></span>
                </template>
              </el-table-column>
              <el-table-column prop="addDate" label="录入时间" width="170" />
              <el-table-column prop="difficulty" label="难度" width="100" />
              <el-table-column prop="creator" label="录入人" width="160" />
              <el-table-column label="操作">
                <template #default="{ row }">
                  <el-button
                    type="primary"
                    class="btn"
                    icon="el-icon-view"
                    circle
                    plain
                    @click="viewEle(row)"
                  />
                  <el-button
                    type="success"
                    class="btn"
                    icon="el-icon-edit"
                    circle
                    plain
                    @click="editEle(row)"
                  />
                  <el-button
                    type="danger"
                    class="btn"
                    icon="el-icon-delete"
                    circle
                    plain
                    @click="delClick(row)"
                  />
                  <el-button
                    type="warning"
                    class="btn"
                    icon="el-icon-check"
                    circle
                    plain
                    @click="upgradeClick(row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!-- 分页 -->
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[1, 2, 3, 4, 10]"
              :page-size="10"
              background
              layout="prev, pager, next, sizes, jumper"
              :total="allPageData"
            />
          </div>
          <!-- 弹窗 -->
          <popUpLayer :dialogVisible.sync="dialogVisible" :arrAlr="arrAlr" />
        </el-card>
      </div>
    </el-row>
  </div>
</template>
<script>
import popUpLayer from '../components/pop-upLayer'
import {
  getQuestionsApi,
  postQuestionsRandomsApi,
  postQuestionsChoiceApi
} from '@/api/menu'
import theContent from '../components/theContent'
export default {
  components: { theContent, popUpLayer },
  data() {
    return {
      dialogVisible: false, // 控制弹窗
      page: 1, // 页数
      pagesize: 10, // 没页条数
      currentPage4: 1,
      sizeForm: 1,
      allPageData: 0, // 所有条数
      // 表格数据数组
      tableData: [], // 表格所有数据
      // 收集数据表单
      from: {
        page: 1, // 页数
        pagesize: 99, // 也条数
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: '' // 企业所在省地
      },
      arrAlr: {}
    }
  },
  async created() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f0f2f5')
    const { data: res } = await getQuestionsApi()
    this.allPageData = res.counts
    this.tableData = res.items
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      const obj = {
        pagesize: this.pagesize,
        page: this.page
      }
      this.listApi(obj)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      const obj = {
        pagesize: this.pagesize,
        page: this.page
      }
      this.listApi(obj)
    },
    // 子传父搜索按钮
    async searchBtn(from) {
      console.log(from)
      const obj = {
        page: 1, // 页数
        pagesize: 99, // 也条数
        keyword: 1 // 关键字
      }
      const { data: res } = await getQuestionsApi(obj)
      this.tableData = res.items
      console.log(this.tableData)
    },
    // 封装列表api
    async listApi(obj) {
      const { data: res } = await getQuestionsApi(obj)
      this.allPageData = res.counts
      this.tableData = res.items
    },
    // 打开弹窗
    viewEle(row) {
      this.arrAlr = row
      this.dialogVisible = true
    },
    // 跳转页面
    editEle(row) {
      // console.log(row)
      const stringRow = JSON.stringify(row)
      // console.log(stringRow)
      this.$router.push({
        path: '/nested/menu1-3',
        query: {
          tb: stringRow
        }
      })
    },
    // 删除按钮
    async delClick(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          postQuestionsRandomsApi(row.id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 将基础题目加入精选题目按钮
    async upgradeClick(row) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postQuestionsChoiceApi(row.id)
          const { data: res } = await getQuestionsApi()
          this.allPageData = res.counts
          this.tableData = res.items
          this.$message({
            type: 'success',
            message: '加入成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          })
        })
    }
  }
}
</script>
<style scoped lang="scss">
.incoTitle {
  line-height: 20px;
  margin-bottom: 15px;
}
.btn {
  width: 35px;
  height: 35px;
  padding: 9px;
  // background-color: #ecf5ff;
}
.block {
  float: right;
  margin: 10px;
}
</style>
